<template>
  <div class="app-container">
    <!--start========头部折叠面板===========start-->
    <!--start========头部折叠面板===========start-->
    <!--start========顶部工具栏===========start-->
    <el-row :gutter="10" class="mb8 mt10">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleOpen(undefined, '添加流程实例', 'Add', true)">
          添加
        </el-button>
      </el-col>
    </el-row>
    <!--end========顶部工具栏===========end-->
    <!--start========表格列表===========start-->
    <el-table stripe :header-cell-style="{background:'#eef1f6',color:'#606266'}" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="processName" label="流程名称">
        <template slot-scope="scope">
          {{ scope.row.processName }}
        </template>
      </el-table-column>
      <el-table-column prop="orderState" label="流程状态">
        <template slot-scope="scope">
          <el-select mode="list" v-model="scope.row.orderState" dict-key="wf_order_state"></el-select>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="流程发起人">
        <template slot-scope="scope">
          {{ scope.row.variableMap['operator.realName'] }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button  type="text" size="small" icon="el-icon-view" @click.native.stop="openDialog(scope.row, '查看流程实例', 'Details', false)">查看</el-button>
          <el-button :disabled="scope.row.orderState!=1"  type="text" size="small" icon="el-icon-refresh-left" @click.native.stop="handleTakeBack(scope.row)">取回流程</el-button>
          <el-button :disabled="scope.row.orderState!=1"  type="text" size="small" icon="el-icon-document-delete" @click.native.stop="handleUndo(scope.row)">作废流程</el-button>
          <el-button :disabled="scope.row.orderState==1"  type="text" size="small" icon="el-icon-delete" @click.native.stop="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--end========表格列表===========end-->
    <!--start========分页===========start-->
    <pagination
      v-show="recordCount>0"
      :total="recordCount"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="requestData"
    />
    <!--end========分页===========end-->
    <!--start========弹框===========start-->
    <el-dialog :title="title" :visible.sync="isOpenDialog" width="50%" append-to-body @close="handleCancel">
      <component :ref="currentView" :is="currentView" v-if="isOpenDialog" :id="id"></component>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="showOk" :loading="submitLoading" @click="handleSubmit">确定</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </el-dialog>
    <!--end========弹框===========end-->
  </div>
</template>
<script>
import Add from './add'
import Edit from './edit'
import Details from './details'
import { list as listOrder, cascadeRemove as removeOrder, takeBack, undo } from '@/api/turboflow/order.js'

export default {
  name: 'WfOrderIndex',
  components: {
    Add,
    Edit,
    Details
  },
  data() {
    return {
      // 当前id
      id: undefined,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 加载中
      loading: false,
      // 总记录数
      recordCount: 0,
      // 当前页
      pageNum: 1,
      // 每页大小
      pageSize: 10,
      total: 0,
      // 列表数据
      tableData: [],
      // 当前勾选行id
      ids: [],
      // 当前勾选行集合
      selection: [],
      // 当前弹出框页面
      currentView: 'Add',
      // 弹框标题
      title: '标题',
      // 是否打开弹出框
      isOpenDialog: false,
      // 是否显示弹出框确认按钮
      showOk: true,
      // 提交加载中
      submitLoading: false
    }
  },
  created() {
    this.requestData()
  },
  methods: {
    // 查询
    handleSearch() {
      this.requestData()
    },
    // 删除
    handleRemove(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = []
        if (row.id) {
          ids.push(row.id)
        } else {
          ids = this.ids
        }
        removeOrder({
          id: ids[0]
        }).then(res => {
          if (res.code === 0) {
            this.$message({ message: '删除成功', type: 'success' })
            this.requestData()
          } else {
            this.$message({ message: res.msg || '删除失败', type: 'error' })
          }
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    // 表格选中事件
    handleSelectionChange(selection) {
      this.selection = selection
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 请求数据
    requestData(page) {
      if (!page) {
        page = {
          page: this.pageNum,
          limit: this.pageSize
        }
      }
      this.loading = true
      listOrder({
        pageNum: page.page,
        pageSize: page.limit,
        ...this.$refs['searchForm'] ? this.$refs['searchForm'].getData() : {}
      }).then(res => {
        this.loading = false
        if (res.code === 0) {
          this.tableData = res.data;
          this.recordCount = res.data.total;
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // 取消提交
    handleOpen(a, title, s, b) {
      this.title = title;
      this.currentView = s;
      this.showOk = true;
      this.id = a
      this.isOpenDialog = b;
      /*if (typeof this.$refs[this.currentView].resetFields === 'function') {
        this.$refs[this.currentView].resetFields()
      }*/
    },
    // 表单提交
    handleSubmit() {
      this.submitLoading = true
      this.$refs[this.currentView].submit().then(() => {
        this.submitLoading = false
        this.handleCancel()
        this.requestData()
      }).catch(() => {
        this.submitLoading = false
      })
    },
    // 取消提交
    handleCancel() {
      // this.id = undefined
      this.isOpenDialog = false
      if (typeof this.$refs[this.currentView].resetFields === 'function') {
        this.$refs[this.currentView].resetFields()
      }
    },
    // 搜索重置
    searchReset() {
      this.requestData()
    },
    // 取回流程
    handleTakeBack(row) {
      this.$confirm('此操作将取回流程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = []
        if (row.id) {
          ids.push(row.id)
        } else {
          ids = this.ids
        }
        takeBack({
          id: ids[0]
        }).then(res => {
          if (res.code === 0) {
            this.$message({ message: '取回流程成功', type: 'success' })
            this.requestData()
          } else {
            this.$message({ message: res.msg || '取回流程失败', type: 'error' })
          }
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消取回流程' })
      })
    },
    // 作废流程
    handleUndo(row) {
      this.$confirm('此操作将作废该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = []
        if (row.id) {
          ids.push(row.id)
        } else {
          ids = this.ids
        }
        undo({
          id: ids[0]
        }).then(res => {
          if (res.code === 0) {
            this.$message({ message: '作废流程成功', type: 'success' })
            this.requestData()
          } else {
            this.$message({ message: res.msg || '作废流程失败', type: 'error' })
          }
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消作废流程' })
      })
    }
  }
}
</script>
